<template>
  <el-skeleton :rows="rows" animated :class="calssName" style="height: 100%">
    <template #template>
      <el-skeleton-item
        :style="{
          height: itemHeight + 'px',
          width: index === 0 ? '30%' : '100%',
          marginBottom: '10px',
        }"
        v-for="(item, index) in rows"
        :key="rows"
      />
    </template>
  </el-skeleton>
</template>

<script setup>
/*这是一个根据父元素高度，决定多少横条的骨架屏 */
import { onMounted, ref } from "vue";
let rows = ref(0);
let props = defineProps({
  className: {
    type: String,
    default: "mainWrap",
  },
  // 横条的高度
  itemHeight: {
    type: Number,
    default: 16,
  },
});

// 获取这个loading的class名
let calssName =
  "." + props.className + "-" + Math.random(0, 1).toFixed(8).split(".")[1];

onMounted(() => {
  let height =
    document.getElementsByClassName(calssName)[0].parentElement.offsetHeight;
  rows.value = Math.floor(height / (props.itemHeight + 14)); // 14 = 它本身就具有4像素间隙，加上一个marginBottom: '10px'
});
</script>
<style scoped lang="scss">
.el-skeleton {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
</style>
